<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="9" :offset="16" :xl="{span: 8, offset: 13}">
          <el-button v-if="this.menuList.includes('schoolPermisionReset')" type="primary" plain size="medium" class="dangerBtn" @click="resetPasswordFn">重置密码</el-button>
          <el-button v-if="this.menuList.includes('schoolPermisionDel')" type="primary" plain size="medium" class="dangerBtn" @click="delFn">删除</el-button>
          <el-button v-if="this.menuList.includes('schoolPermisionAdd')" type="primary" size="medium" @click="addPersonnel">添加人员</el-button>
          <el-button v-if="this.menuList.includes('schoolPermisionExcel')" type="primary" plain size="medium" @click="exportFn">导出</el-button>
        </el-col>
      </el-row>
      <br />
       <el-row :gutter="24" class="centerTable">
        <el-table border :data="tableData" :class="tableConfig.class" :style="tableConfig.style" v-loading="tableConfig.loading" @selection-change="goToDeleteSelect">
        <!-- 多选按钮 -->
        <template v-if="tableConfig.checkout==true">
          <el-table-column type="selection" align="center" :selectable="selectable"></el-table-column>
        </template>
        <template v-for="(item, index) in tableConfig.config">
          <!-- 操作 -->
          <template v-if="item.prop === 'operation'">
            <el-table-column :key="item.prop" :prop="item.prop" :label="item.label" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :fixed="item.fixed">
              <template slot-scope="scope">
                <template v-if="scope.$index !==0">
                  <el-button v-for="n in item.list" :key="n.id" @click="goToOperation(scope.row, n.id)" type="text" size="small" :class="n.className">{{n.name}}</el-button>
                </template>
                <template v-else>
                  <el-button type="primary" round size="mini" @click="goToOperation(scope.row, 'query')">查询</el-button>
                  <el-button type="text" @click="goToOperation(scope.row, 'del')">清除</el-button>
                </template>
              </template>
            </el-table-column>
          </template>
          <!-- 状态 -->
          <template v-else-if="item.prop === 'status'">
            <el-table-column :key="item.id" :prop="item.prop" :label="item.label" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width">
              <template slot-scope="scope">
                <div v-if="scope.$index === 0">
                  <el-input v-model="item.modelValue" placeholder="请输入内容" v-if="scope.row[item.prop] === 'input'"></el-input>
                  <el-select v-model="item.modelValue" placeholder="请选择" v-if="scope.row[item.prop] === 'select'">
                    <el-option v-for="item in item.optionsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
                <template v-else>
                  <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" active-color="#49abf8" inactive-color="#ec5529" @change="changeSwitch(scope.row)"/>
                </template>
              </template>
            </el-table-column>
          </template>
          <!-- 内容 -->
          <template v-else>
            <el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" :formatter="item.formatter">
              <template slot-scope="scope">
                <div v-if="scope.$index === 0">
                  <el-input v-model="item.modelValue" placeholder="请输入内容" v-if="scope.row[item.prop] === 'input'"></el-input>
                  <el-select v-model="item.modelValue" placeholder="请选择" v-if="scope.row[item.prop] === 'select'">
                    <el-option v-for="item in item.optionsList" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </div>
                <div v-else >
                  <div v-if="item.prop === 'range'">
                     <template>
                      <el-popover trigger="hover" placement="top">
                        <el-tree :data="scope.row[item.prop]" :props="defaultProps"></el-tree>
                        <div slot="reference" class="name-wrapper">
                          <el-tag size="medium">查看权限</el-tag>
                        </div>
                      </el-popover>
                    </template>
                  </div>
                  <div v-else>{{scope.row[item.prop]}}</div>
                </div>
              </template>
            </el-table-column>
          </template>
        </template>
      </el-table>
      </el-row>
      <br/>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
      <!-- 新增 -->
      <add-personnel v-if="this.isAddPersonnel" :isAddPersonnel="this.isAddPersonnel" @noAddPersonnel="noAddPersonnel"></add-personnel>
      <!-- 编辑 -->
      <edit-personnel-list v-if="this.isEditPersonnel" :isEditPersonnel="this.isEditPersonnel" :row="this.row" @noEditPersonnel="noEditPersonnel"></edit-personnel-list>
    </div>
  </div>
</template>
<script>
import downloadApi from '@/common/downloadApi.js'
import addPersonnel from './addPersonnel.vue'
import editPersonnelList from './editPersonnelList.vue'
import {APIPERMISSIONGETUSERLIST, APIDELPERMISSION, APISCHOOLRESETPASSWORD} from '@/common/api.js'
export default {
  components: {addPersonnel, editPersonnelList},
  data () {
    return {
      api: '',
      menuList: [],
      isAddPersonnel: false,
      isEditPersonnel: false,
      configRow: ['input', '', 'input', 'input', 'input', '', 'input', 'select', ''], // 配置的就是input、select 没有就是空
      configRowList: {
        full_name: '',
        sex_name: '',
        users_name: '',
        mobile: '',
        email: '',
        range: '',
        role_name: '',
        status_name: ''
      },
      tableData: [],
      tableConfig: {
        loading: false,
        class: 'table-list', // 表格的class名
        style: 'width:100%',
        checkout: true, // 控制是否有多选框
        index: true, // 是否有序号
        config: [
          {
            label: '姓名',
            prop: 'full_name',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '性别',
            prop: 'sex_name',
            align: 'center',
            modelValue: '',
            optionsList: [{
              title: '男',
              id: 1
            }, {
              title: '女',
              id: 2
            }]
          },
          {
            label: '账号',
            prop: 'users_name',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '手机号',
            prop: 'mobile',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '邮箱',
            prop: 'email',
            align: 'center',
            modelValue: ''
          },
          {
            label: '管理范围',
            prop: 'range',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '角色',
            prop: 'role_name',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '状态',
            prop: 'status_name',
            align: 'center',
            modelValue: '',
            optionsList: [{
              title: '启用',
              id: 1
            }, {
              title: '禁用',
              id: 0
            }]
          },
          {
            prop: 'operation',
            label: '操作',
            list: []
          }
        ]
      },
      currentPage: 1,
      total: 0,
      page: 1,
      form: {
        name: '',
        sex: '',
        users_name: '',
        mobile: '',
        email: '',
        status: '',
        role_name: ''
      },
      checkStr: '',
      row: null,
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  created () {
    this.Api = downloadApi
    this.menuList = sessionStorage.getItem('list')
    if (this.menuList.includes('schoolPermisionEdit')) {
      var operation1 = {id: 'edit', name: '编辑'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation1)
        }
      })
    }
    if (this.menuList.includes('schoolPermisionDel')) {
      var operation2 = {id: 'delect', name: '删除', className: 'dangerTextBtn'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation2)
        }
      })
    }
    this.tableList()
  },
  methods: {
    selectable (row, index) {
      if (index !== 0) {
        return true
      } else {
        return false
      }
    },
    InIt () { // 初始化
      this.tableData = []
      const arrs = Object.keys(this.configRowList)
      const obj = {}
      arrs.map((item, index) => {
        obj[item] = this.configRow[index]
      })
      this.tableData.unshift(obj)
    },
    dataProcessing () { // 整理
      this.tableConfig.config.forEach(element => {
        if (element.label === '姓名') {
          this.form.name = element.modelValue
        }
        if (element.label === '账号') {
          this.form.users_name = element.modelValue
        }
        if (element.label === '性别') {
          this.form.sex = element.modelValue
        }
        if (element.label === '手机号') {
          this.form.mobile = element.modelValue
        }
        if (element.label === '邮箱') {
          this.form.email = element.modelValue
        }
        if (element.label === '角色') {
          this.form.role_name = element.modelValue
        }
        if (element.label === '状态') {
          this.form.status = element.modelValue
        }
      })
      this.tableList()
    },
    tableList () { // 表格
      this.form.page = this.page
      this.form.school_id = this.$route.query.id
      APIPERMISSIONGETUSERLIST(this.form).then((res) => {
        if (res.status === 1) {
          this.InIt()
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          res.data.list.forEach(item => {
            this.tableData.push(item)
          })
        } else {
          this.$message.error(res.msg)
          this.InIt()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    goToOperation (val, id) { // 按钮
      if (id === 'query') {
        this.dataProcessing()
      } else if (id === 'del') {
        this.form.name = ''
        this.form.sex = ''
        this.form.users_name = ''
        this.form.mobil = ''
        this.form.email = ''
        this.form.status = ''
        this.form.role_name = ''
        this.tableConfig.config.forEach(element => {
          element.modelValue = ''
        })
        this.tableList()
      } else if (id === 'delect') {
        this.delectFn(val)
      } else if (id === 'edit') {
        this.editPersonnel(val)
      }
    },
    goToDeleteSelect (val) { // 多选
      let arr = []
      val.forEach(item => {
        arr.push(item.uid)
      })
      this.checkStr = arr.toString()
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    delectFn (e) { // 删除
      this.$confirm('此操作将永久删除该人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APIDELPERMISSION({
          uid: e.uid
        }).then((res) => {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
            this.InIt()
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delFn () { // 批量删除
      this.$confirm('此操作将永久删除这些人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APIDELPERMISSION({
          uid: this.checkStr
        }).then((res) => {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
            this.InIt()
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    resetPasswordFn () { // 批量重置密码
      this.$confirm('此操作将对这些人员重置密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APISCHOOLRESETPASSWORD({
          uid: this.checkStr
        }).then((res) => {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
            this.InIt()
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addPersonnel () { // 添加
      this.isAddPersonnel = true
    },
    noAddPersonnel (type) {
      this.isAddPersonnel = false
      if (type === 1) {
        this.tableList()
      }
    },
    editPersonnel (e) { // 编辑
      this.row = e
      this.isEditPersonnel = true
    },
    noEditPersonnel (type) {
      this.isEditPersonnel = false
      if (type === 1) {
        this.tableList()
      }
    },
    exportFn () { // 导出
      window.location.href = this.Api + '/api/school/permission/export?token=' + window.sessionStorage.getItem('token') + '&school_id=' + this.$route.query.id
    }
  }
}
</script>
